import React, { FC, useEffect } from 'react'
import { Typography,Checkbox as AntdCheckBox } from 'antd';
import { useDispatch } from 'react-redux';
import { getCategory } from '../../store/actions/category.action';
import { useSelector } from '../../hooks/useSelector';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';

const { Title } = Typography;

interface Props {
  hanleFilter:(arg:string[]) => void
}

const CheckBox:FC<Props> = ({hanleFilter}) => {
  const dispatch = useDispatch()
  const category = useSelector(state=> state.category)
  useEffect(()=>{
    dispatch(getCategory())
  },[dispatch])
  const onChange = (checkValue:CheckboxValueType[])=>{
    hanleFilter(checkValue as string[])
  }
  return (
    <>
      <Title level={4}>按照分类筛选</Title>
      <AntdCheckBox.Group
        className='checkBoxFilter'
        options={category.category.result.map(item=>({
          label: item.name,value: item._id
        }))}
        onChange={onChange}
      />
    </>
  )
}

export default CheckBox